<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        span{
            border:1px solid transparent;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- <div :style="{color:'red'}">这是div</div>
        <p  :style="{color:'red'}">这是p</p>
        <span  :style="{color:'red'}">这是span</span> -->


        <button @click="color='blue'">changeColor:{{color}}</button>
        <button @click="show=!show">changeShow</button>
        <br>

        <!-- v-color="color"  -->
        <!-- v-color:bg="color"  -->
        <!-- v-color:text="color"  -->
        <!-- v-color:border="color"  -->
        <div v-color:text.a.b="color" v-if="show">这是div</div>
        <p v-color:bg="color">这是p</p>
        <span v-color:border="color" >这是span</span>
    </div>
</body>
<script>
    // 指令:
    // 指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

    // 指令:用于标签内, 作为标签内的自定义属性  => Vue在将模版解析为虚拟DOM时会处理 Vue中的自定义属性

    // 注意:
    // 1. 指令 (Directives) 是带有v-前缀的特殊属性 => Vue中的自定义属性
    // 2. 指令属性的值预期是单个 JavaScript 表达式
    // 3. 当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

    // 格式
    // v-指令名 = "指令值"     eg: v-if  v-html
    // v-指令名:参数 = "指令值"     eg: v-bind:class   v-on:click
    // v-指令名:参数.修饰符.修饰符  = "指令值"   eg: v-on:click.stop   v-model.lazy

    // 自定义指令     
    //     通过自定义指令,当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM  => 指令可以服用


    // 如何自定义指令
    // 全局指令
    // Vue.directive(dirName,dirOptions)
    // dirName 指令名称
    // dirOptions 指令的配置 => 用于配置钩子函数 -> 可以在指令绑定的不同阶段执行


    /* Vue.directive("color",{
        bind:function(el){ // 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
            console.log("bind");
        },
        inserted:function(){ // inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
            console.log("inserted");
        },
        update:function(){ // 指令的值可能发生了改变，也可能没有。
            console.log("update");
        },
        unbind:function(){
            console.log("unbind");
        }
    }) */

  /*   Vue.directive("color",{
        inserted:function(el,binding){ // inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
            console.log("inserted");
            console.log("el",el);
            console.log("binding",binding);

            let {arg='text', value} = binding;
            switch(arg){
                case "text": 
                    el.style.color = value;
                    break;
                case "bg": 
                    el.style.backgroundColor = value;
                    break;
                case "border": 
                    el.style.borderColor = value;
                    break;
                default:
                    el.style.color = value;
                    break;
            }

        },
        update:function(el,binding){ // 指令的值可能发生了改变，也可能没有。
            console.log("update");
            console.log("inserted");
            console.log("el",el);
            console.log("binding",binding);

            let {arg='text', value} = binding;
            switch(arg){
                case "text": 
                    el.style.color = value;
                    break;
                case "bg": 
                    el.style.backgroundColor = value;
                    break;
                case "border": 
                    el.style.borderColor = value;
                    break;
                default:
                    el.style.color = value;
                    break;
            }
        },
    })  */



    // 自定义指令, 绑定钩子函数
    // 会在inserted / update 时执行
    /* Vue.directive("color",function(el,binding){ 
            console.log("inserted");
            console.log("el",el);
            console.log("binding",binding);

            let {arg='text', value} = binding;
            switch(arg){
                case "text": 
                    el.style.color = value;
                    break;
                case "bg": 
                    el.style.backgroundColor = value;
                    break;
                case "border": 
                    el.style.borderColor = value;
                    break;
                default:
                    el.style.color = value;
                    break;
            }

        })  */



    // 局部指令


    // 钩子函数参数
    // el: 指令所绑定的元素，可以用来直接操作 DOM
    // binding：一个对象，包含以下 property,指令相关的属性
    //      name：指令名，不包括 v- 前缀。
    //      value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
    //      oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
    //      expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
    //      arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
    //      modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

    var app = new Vue({
        el:"#app",
        data:{
            color:"red",
            show:true,
        },
        directives:{
            color:function(el,binding){ 
                console.log("inserted");
                console.log("el",el);
                console.log("binding",binding);

                let {arg='text', value} = binding;
                switch(arg){
                    case "text": 
                        el.style.color = value;
                        break;
                    case "bg": 
                        el.style.backgroundColor = value;
                        break;
                    case "border": 
                        el.style.borderColor = value;
                        break;
                    default:
                        el.style.color = value;
                        break;
                }

             }
        }

    })

</script>
</html>